<template>
  <el-container class="back">
    <el-header><Header /></el-header>
    <el-main id="main">
      <div id="left">
        <div class="content">
          <div class="title">
            <router-link v-if="question.question.isRealName === 0" :to="{name: 'User', params:{id: question.question.userId}}">
              <a target="_blank" class="common-a" href="javascript:void(0);">
                <img :src="question.questionerAvatar">
              </a>
            </router-link>
            <a v-else target="_blank" href="javascript:void(0)">
              <img src="http://rbfvta36h.hd-bkt.clouddn.com/mrtx.jpg">
            </a>
            <h1>{{ question.question.title }}</h1>
            <strong>{{ question.answerCount }}个回答</strong>
          </div>
          <p class="read-capacity">
            <span class="time">{{ time }}</span>
            <span style="postion:relative">
              <i class="iconfont icon-chakan" />
              <a>{{ question.readCount }}</a>
            </span>
          </p>
          <p class="text"> {{ question.question.content }}</p>
          <ul class="label">
            <li class="visit">
              <a target="_blank" class="common-a" href="javascript:void(0);">{{ question.question.ptagName }}</a>
            </li>
            <li v-for="subTag in question.subTagList" :key="subTag.id">{{ subTag.name }}</li>
            <li class="report" style="margin-right:20px" @click="addQuestionReport(question.question.id)"><span>举报</span></li>
          </ul>
        </div>
        <div class="comment-reply">
          <div class="hug" @click="giveAHug">
            <el-image v-if="question.isHug" src="http://rbfvta36h.hd-bkt.clouddn.com/hug.png" />
            <el-image v-else style="width:98px;height:68px;" src="http://rbfvta36h.hd-bkt.clouddn.com/unhug.png" />
            <p>
              <span>给TA抱抱</span>
              <a>
                <font>{{ question.hug }}</font>
                个抱抱
              </a>
            </p>
          </div>
          <div class="collect" @click="collect">
            <el-image v-if="question.isCollected" src="http://rbfvta36h.hd-bkt.clouddn.com/collect.png" />
            <el-image v-else src="https://lapp.xinli001.com/images/website-www/v5/uncollect.png" />
            <p>
              <span>收藏问题</span>
              <a>
                <font>
                  {{ question.collected }}
                </font>
                个收藏
              </a>
            </p>
          </div>
          <div class="reply" @click="openAnswerEdit">
            <el-image src="http://rbfvta36h.hd-bkt.clouddn.com/answer-click.png" />
            <p>
              <span>我来回答</span>
              <a>{{ question.answerCount }}个回答</a>
            </p>
          </div>
        </div>
        <div id="answerText" ref="answer" class="answer-text" style="display:none;">
          <mavon-editor v-model="mavon" :toolbars="toolbars" :transition="true" :subfield="false" default-open="edit" class="mavonEdit" @change="handle" />
          <el-button class="answer-buttom" @click="submitQuestionAnswer">提交回答</el-button>
        </div>
        <ul v-if="answerList.length > 0" class="content-ans">
          <li v-for="answer in answerList" :key="answer.questionAnswer.useful">
            <p class="user">
              <router-link :to="{name: 'User', params: {id: answer.questionAnswer.fromUserId}}" target="_blank">
                <a target="_blank" class="common-a username">
                  <img alt="" :src="answer.avatar">
                  {{ answer.username }}
                </a>
              </router-link>
              <span class="honor" />
              <span class="help">累计帮助了{{ answer.helpCount }}人</span>
            </p>
            <div class="recommend-icon">
              <i v-if="answer.questionerThinkUseful" class="iconfont icon-tuijian" />
            </div>
            <div class="text">
              <div v-html="answer.questionAnswer.content" />
            </div>
            <div class="label">
              <span v-if="answer.isFocus" class="follow" @click="unfocus(answer)">
                <i class="iconfont icon-yiguanzhu" />
                <a>已关注</a>
              </span>
              <span v-else class="follow" @click="focus(answer)">
                <div v-if="answer.questionAnswer.fromUserId !== user_id">
                  <i class="iconfont icon-jiaguanzhu" />
                  <a>关注</a>
                </div>
              </span>
              <span class="answer_zan" @click="useful(answer)">
                <i v-if="question.userIsLike" class="iconfont icon-dianzan_kuai" style="color:#0b8bff" />
                <i v-else class="iconfont icon-dianzan" />
                <span class="like-light" />
                <a>有用<font>{{ answer.useful }}</font></a>
              </span>
              <span class="comment_item" @click="comment(answer.questionAnswer.id)">
                <i class="iconfont icon-huifu" />
                <a>评论<font class="comment_num">{{ answer.qaReplyNum }}</font></a>
              </span>
              <p class="created_time">{{ answer.questionAnswer.createTime }}</p>
              <p class="feedback">楼主反馈 {{ answer.feedBack }}</p>
              <p class="report_reply" @click="tipOff(answer.questionAnswer.id)">举报</p>
            </div>
            <div :id="answer.questionAnswer.id" class="discuss" style="display:none">
              <span>
                <font class="comment_num">{{ answer.qaReplyNum }}</font>
                条评论
              </span>
              <div class="comment-list">
                <p v-for="qaComment in answer.qaReplyList" :key="qaComment.id">
                  <a v-if="qaComment.userId !== question.question.userId">{{ qaComment.username }}</a>
                  <a v-else>楼主</a>
                  : {{ qaComment.content }}
                  <span class="report" @click="addQaReport(qaComment.id)">举报</span>
                </p>
              </div>
              <div class="import">
                <input ref="replybox" class="replybox" placeholder="回复评论" @input="onDivInput($event)">
                <el-button class="btn-comment" style="background-color: rgb(143, 202, 255);" @click="sendComment(answer)">评论</el-button>
              </div>
            </div>
          </li>
        </ul>
        <span v-else class="ansf">暂无回答，来抢首答吧！</span>
        <div class="recommend-content" />
      </div>
      <div id="right">
        <div id="up">
          <div class="contain">
            <p class="star">
              <a>0</a>
              <span>获赞数</span>
            </p>
            <p class="ans">
              <a>0</a>
              <span>回答数</span>
            </p>
            <p class="ques">
              <a>0</a>
              <span>提问数</span>
            </p>
          </div>
          <div class="btn">
            <el-button type="primary" @click="gotoAskQuestion">我要提问</el-button>
          </div>
        </div>
      </div>
      <el-backtop :visibility-height="height" :bottom="bottom" />
    </el-main>
    <el-footer><Footer /></el-footer>
  </el-container>
</template>

<script>
import Header from '../header/index.vue'
import { addReport } from '@/api/report'
import Swal from 'sweetalert2'
import Footer from '../foot/foot.vue'
import { getQuestionById, findQuestionAnswerList, addQuestionAnswer, giveAHug, collect,
  cancelCollect, addReadCount, useful, cancelUseful, focus, unfocus, sendComment } from '@/api/question'
import { mapGetters } from 'vuex'
export default {
  components: { Header, Footer },
  data() {
    return {
      height: 200,
      bottom: 100,
      question: {
        question: {
          id: '',
          title: '',
          content: '',
          createTime: '',
          isRealName: ''
        },
        answerCount: '',
        userId: '',
        questionerAvatar: '',
        subTagList: [],
        isHug: Boolean,
        hug: '',
        isCollected: Boolean,
        isFocus: Boolean,
        collected: '',
        readCount: '',
        questionerThinkUseful: Boolean,
        feedBack: ''
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: false, // 标题
        underline: true, // 下划线
        strikethrough: false, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: false, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: false, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: false, // 上一步
        redo: false, // 下一步
        trash: false, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: false // 预览
      },
      mavon: '',
      mavon_html: '',
      answerList: [{
        questionAnswer: {
          id: '',
          content: '',
          createTime: ''
        },
        username: '',
        avatar: '',
        useful: '',
        isUseful: '',
        isFocus: '',
        qaReplyList: [],
        qaReplyNum: ''
      }],
      qaCommentList: [],
      content: ''
    }
  },
  computed: {
    time: function() {
      if (this.question) {
        const dt = new Date(this.question.question.createTime)
        const month = dt.getMonth() + 1
        const date = dt.getDate()
        return `${month}-${date}`
      }
      return ''
    },
    ...mapGetters([
      'user_id'
    ])
  },
  mounted() {
    this.getQuestionById()
    this.findQuestionAnswerList()
    this.addReadCount()
  },
  methods: {
    gotoAskQuestion() {
      window.open('http://localhost:9528/#/addQuestion')
    },
    onDivInput(e) {
      this.content = e.target.value
    },
    // 给一个抱抱
    giveAHug() {
      if (this.question.isHug) {
        this.$message({
          type: 'info',
          message: '不能取消抱抱噢'
        })
      } else {
        giveAHug({ questionId: this.$route.params.id, userId: this.$store.state.user.id }).then(res => {
          this.question.isHug = true
          this.question.hug += 1
        })
      }
      // const ipAPI = '//api.ipify.org?format=json'

      // const inputValue = fetch(ipAPI)
      //   .then(response => response.json())
      //   .then(data => data.ip)
      // const { value: ipAddress } = Swal.fire({
      //   title: 'Enter your IP address',
      //   input: 'text',
      //   inputLabel: 'Your IP address',
      //   inputValue: inputValue,
      //   showCancelButton: true,
      //   inputValidator: (value) => {
      //     if (!value) {
      //       return 'You need to write something!'
      //     }
      //   }
      // })
      // if (ipAddress) {
      //   Swal.fire(`Your IP address is ${ipAddress}`)
      // }
    },
    collect() {
      if (this.$store.state.user.id === '') {
        this.$message({
          type: 'info',
          message: '请先登录再收藏噢'
        })
        return
      }
      if (this.question.isCollected) {
        cancelCollect({ questionId: this.$route.params.id, userId: this.$store.state.user.id })
          .then(res => {
            this.question.isCollected = false
            this.question.collected -= 1
          })
      } else {
        collect({ questionId: this.$route.params.id, userId: this.$store.state.user.id })
          .then(res => {
            this.question.isCollected = true
            this.question.collected += 1
          })
      }
    },
    handle(value, render) { // 回答markdown语法转换html存入数据库
      this.mavon_html = render
    },
    submitQuestionAnswer() {
      if (this.$store.state.user.id === '') {
        this.$message.error('请先登录再进行回答!')
        return
      }
      if (this.mavon === '' || this.mavon.length === 0) {
        this.$message.error('回答不可为空')
        return
      }
      addQuestionAnswer({ fromUserId: this.$store.state.user.id, questionId: this.$route.params.id,
        content: this.mavon_html }).then(res => {
        if (res.data === 'true') {
          this.$message({
            type: 'success',
            message: '回答提交成功'
          })
        }
        this.mavon_html = ''
        this.mavon = ''
        document.getElementById('answerText').style.display === 'none'
      })
    },
    getQuestionById() {
      getQuestionById({ id: this.$route.params.id, userId: this.$store.state.user.id }).then(res => {
        this.question = res.data
      })
    },
    openAnswerEdit() {
      if (document.getElementById('answerText').style.display === 'none') {
        document.getElementById('answerText').style.display = 'block'
      } else {
        document.getElementById('answerText').style.display = 'none'
      }
    },
    findQuestionAnswerList() {
      findQuestionAnswerList({ questionId: this.$route.params.id, userId: this.$store.state.user.id })
        .then(res => {
          this.answerList = res.data
        })
    },
    addReadCount() {
      addReadCount({ id: this.$route.params.id })
    },
    useful(answer) {
      if (answer.isUseful) {
        cancelUseful({ qaId: answer.questionAnswer.id, userId: this.$store.state.user.id }).then(res => {
          answer.useful -= 1
          answer.isUseful = !answer.isUseful
          if (this.$store.state.user.id !== null && this.$store.state.user.id === this.question.question.userId) {
            answer.questionerThinkUseful = !answer.questionerThinkUseful
          }
        })
      } else {
        useful({ qaId: answer.questionAnswer.id, userId: this.$store.state.user.id }).then(res => {
          answer.useful += 1
          answer.isUseful = !answer.isUseful
          if (this.$store.state.user.id !== null && this.$store.state.user.id === this.question.question.userId) {
            answer.questionerThinkUseful = !answer.questionerThinkUseful
          }
        })
      }
    },
    focus(answer) {
      focus({ answerUserId: answer.questionAnswer.fromUserId, loginUserId: this.user_id }).then(res => {
        answer.isFocus = !answer.isFocus
      })
    },
    unfocus(answer) {
      unfocus({ answerUserId: answer.questionAnswer.fromUserId, loginUserId: this.user_id }).then(res => {
        answer.isFocus = !answer.isFocus
      })
    },
    comment(data) {
      if (document.getElementById(data).style.display === 'block') {
        document.getElementById(data).style.display = 'none'
      } else {
        document.getElementById(data).style.display = 'block'
      }
    },
    sendComment(answer) {
      sendComment({ qaId: answer.questionAnswer.id, content: this.content, userId: this.user_id }).then(res => {
        answer.qaReplyList.push(res.data)
      })
    },
    addQuestionReport(id) {
      Swal.fire({
        title: '确定要举报吗?',
        icon: 'question',
        confirmButtonText: '确定',
        showCancelButton: true,
        cancelButtonText: '取消',
        heightAuto: false
      }).then(res => {
        if (res.isConfirmed) {
          addReport({ userId: this.$store.getters.user_id, itemId: id, reportType: 2 }).then(res => {
            if (res.code === 1) {
              Swal.fire('举报成功!', '', 'success')
            }
          })
        }
      })
    },
    addQaReport(id) {
      Swal.fire({
        title: '确定要举报吗?',
        icon: 'question',
        confirmButtonText: '确定',
        showCancelButton: true,
        cancelButtonText: '取消',
        heightAuto: false
      }).then(res => {
        if (res.isConfirmed) {
          addReport({ userId: this.$store.getters.user_id, itemId: id, reportType: 4 }).then(res => {
            if (res.code === 1) {
              Swal.fire('举报成功!', '', 'success')
            }
          })
        }
      })
    },
    tipOff(id) {
      Swal.fire({
        title: '确定要举报吗?',
        icon: 'question',
        confirmButtonText: '确定',
        showCancelButton: true,
        cancelButtonText: '取消',
        heightAuto: false
      }).then(res => {
        if (res.isConfirmed) {
          addReport({ userId: this.$store.getters.user_id, itemId: id, reportType: 3 }).then(res => {
            if (res.code === 1) {
              Swal.fire('举报成功!', '', 'success')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.back{
  color: #111;
  background: #eee;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#main{
  width: 1180px;
  margin: 0 auto;
  padding-top: 40px;
  scrollbar-width: none;
}
#main::-webkit-scrollbar {
    display: none;
}
#left{
  width: 800px;
  float: left;
  margin-right: 20px;
}
.content{
  list-style-type: none;
  margin-bottom: 20px;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
}
.title{
  height: 30px;
  line-height: 30px;
}
.common-a{
  text-decoration: none;
}
.common-a:hover {
  filter:alpha(Opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
}
#left .ansf {
    margin-top: 30px;
    margin-bottom: -10px;
    line-height: 16px;
    font-size: 16px;
    color: #999;
    text-align: center;
    margin-left: 300px;
}
#left .content .title img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
  margin-right: 20px;
}
#left .content .title h1{
  display: inline-block;
  font-size: 20px;
  color: #333;
  font-weight: 700;
}
#left .content .title strong {
  float: right;
  font-size: 16px;
  line-height: 30px;
  color: #666;
  font-weight: 400!important;
}
.read-capacity{
  margin-left: 50px;
}
#left .content .read-capacity span {
  font-size: 12px;
  line-height: 12px;
  color: #999;
  margin-right: 40px;
}
#left .content .read-capacity i {
  margin-right: 8px;
  width: 16px;
  height: 12px;
}
.text{
  margin: 15px 0 10px 50px;
  font-size: 14px;
  line-height: 22px;
  color: #333;
  width: 656px;
  word-wrap: break-word;
  overflow: hidden;
}
.visit{
  background: #ddefff;
  border: none;
  color: #a1b3db
}
.label {
  margin-left: 50px;
  list-style-type: none;
}
#left .content .label li {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 20px;
  font-size: 14px;
  line-height: 14px;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  color: #bababa;
}
.comment-reply{
  width: 800px;
  height: 94px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}
#left .comment-reply div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
  flex: justify-content;
  .el-image{
    padding-top: 20px;
    padding-left: 50px;
    float: left;
  }
  p{
    padding-top: 20px;
    padding-left: 20px;
    float: left;
    width: 100px;
  }
}
// #left .comment-reply img {
//   padding: 23px 20px 23px 60px;
//   width: 48px;
//   height: 48px;
//   float: left;
// }
// #left .comment-reply div p {
//   padding-top: 23px;
// }
#left .comment-reply div span {
  font-size: 18px;
  color: #333;
  line-height: 28px;
}
#left .comment-reply a {
  font-size: 14px;
  line-height: 24px;
  color: #999;
  display: block;
}
.answer-text {
  position: relative;
  z-index: 0;
}
.mavonEdit{
  height: auto!important;
  border-radius: 10px;
  overflow: hidden;
}
.answer-buttom {
  width: 140px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #fff;
  background: #2f5aff;
  margin: 20px 41%;
  border-radius: 20px;
  font-size: 14px;
}
.content-ans{
  list-style-type: none;
}
#left .content-ans li {
  position: relative;
  margin-bottom: 20px;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
}
#left .content-ans li .user {
  height: 30px;
  line-height: 30px;
}
.username {
  font-size: 16px;
  color: #333;
}
#left .content-ans .user img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    float: left;
    margin-right: 20px;
}
#left .content-ans .user .help {
    color: #6982fa;
    margin-left: 5px;
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
}
#left .content-ans li .recommend-icon {
  position: absolute;
  top: 84px;
  left: 34px;
}
#left .content-ans li .recommend-icon i {
  font-size: 22px;
  color: #75bdff;
}
.text {
  margin: 20px 0 20px 50px;
  font-size: 14px;
  line-height: 22px;
  color: #333;
  width: 656px;
  word-wrap: break-word;
}
.label {
  margin-left: 50px;
  height: 24px;
  line-height: 24px;
}
#left .content-ans li .label span {
  float: left;
  margin-right: 60px;
  height: 18px;
  position: relative;
  min-width: 18px;
}
#left .content-ans li .label img {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  position: absolute;
  top: 3px;
  left: -28px;
  cursor: pointer;
}
#left .content-ans li .label span a {
  font-size: 14px;
  color: #999;
  font-weight: 400;
}
#left .content-ans li .label p {
  display: inline-block;
  color: #999;
  font-size: 14px;
}
#left .content-ans li .label i {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  position: absolute;
  top: 3px;
  left: -28px;
  cursor: pointer;
}
.like-light {
  display: none;
  width: 42px;
  top: -12px;
  left: -40px;
  -webkit-animation: myfirst .5s;
  animation: myfirst .5s;
  position: absolute!important;
}
#left .content-ans li .label .created_time {
  margin-left: -30px;
}
#left .content-ans li .label .feedback {
  width: 84px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #f3f4f5;
  border-radius: 6px;
  margin-left: 25px;
}
.report_reply {
  margin-left: 30px;
  cursor: pointer;
}
#left .content-ans li .discuss {
    padding: 15px 20px 20px;
    width: 602px;
    background-color: #fff;
    border: 1px solid #f3f4f5;
    box-shadow: 0 2px 10px 0 #eaeaea;
    border-radius: 3px;
    margin-left: 50px;
    margin-top: 20px;
}
#left .content-ans li .discuss span {
    font-size: 14px;
    line-height: 14px;
    color: #666;
}
#left .content-ans li .discuss .comment-list {
    width: 602px;
    border-bottom: 1px solid #f3f4f5;
    border-top: 1px solid #f3f4f5;
    margin-top: 15px;
}
#left .content-ans li .discuss .comment-list p {
    margin-top: 10px;
}
#left .content-ans li .discuss .comment-list p:last-child {
    margin-bottom: 10px;
}
#left .content-ans li .discuss .comment-list a {
    color: #0b8bff;
}
#left .content-ans li .discuss .report {
    display: inline-block;
    width: 60px;
    height: 24px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 17px;
    color: #bcc2cf;
    line-height: 24px;
    text-align: center;
    margin-left: 10px;
    vertical-align: top;
    box-sizing: border-box;
}
#left .content-ans li .discuss .import {
    width: 602px;
    height: 38px;
    margin-top: 20px;
}
#left .content-ans li .discuss .replybox {
    float: left;
    width: 480px;
    height: 36px;
    border: 1px solid #e1ebf1;
    border-radius: 8px;
    font-size: 16px;
    color: #999;
    text-indent: 16px;
    line-height: 36px;
}
#left .content-ans li .import .btn-comment {
    float: right;
    width: 64px;
    height: 38px;
    background-color: #8fcaff;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 38px;
    margin-right: 35px;
}
#left .recommend-content {
    width: 800px;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 20px 0;
    margin-top: 20px;
}
#right {
  float: right;
}
#up {
    background-color: #fff;
    border-radius: 10px;
    width: 300px;
    height: auto;
    padding: 50px 30px;
    margin-bottom: 20px;
    .contain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 50px;
    p {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      float: left;
      text-align: center;
      a {
        color: #0b8bff;
        font-size: 30px;
        line-height: 30px;
        text-decoration: none;
      }
      span {
        display: block;
        margin-top: 14px;
        font-size: 14px;
        color: #999;
        line-height: 14px;
      }
    }
  }
  .el-button {
    width: 140px;
    height: 42px;
    background-color: #0b8bff;
    border-radius: 8px;
    border: 0;
    font-size: 16px!important;
    color: #fff;
    line-height: 42px;
    text-align: center;
    outline: 0;
    margin-left: 50px;
  }
}
.report{
  margin-left: 60px;
  font-size: 14px;
  cursor: pointer;
}
@font-face {
  font-family: "iconfont"; /* Project id 3332477 */
  src: url('//at.alicdn.com/t/font_3332477_ybxcelukmt8.eot?t=1651154648535'); /* IE9 */
  src: url('//at.alicdn.com/t/font_3332477_ybxcelukmt8.eot?t=1651154648535#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/font_3332477_ybxcelukmt8.woff2?t=1651154648535') format('woff2'),
       url('//at.alicdn.com/t/font_3332477_ybxcelukmt8.woff?t=1651154648535') format('woff'),
       url('//at.alicdn.com/t/font_3332477_ybxcelukmt8.ttf?t=1651154648535') format('truetype'),
       url('//at.alicdn.com/t/font_3332477_ybxcelukmt8.svg?t=1651154648535#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yiguanzhu:before {
  content: "\e612";
}

.icon-huifu:before {
  content: "\e655";
}

.icon-jiaguanzhu:before {
  content: "\e60b";
}

.icon-tuijian:before {
  content: "\e6ec";
}

.icon-a-xingbietouxiang:before {
  content: "\e763";
}

.icon-biaoqian:before {
  content: "\e67e";
}

.icon-zhishiwenda:before {
  content: "\e636";
}

.icon-chakan:before {
  content: "\e628";
}

.icon-quxiaoshoucang:before {
  content: "\e8c2";
}

.icon-shoucang:before {
  content: "\e8c3";
}

.icon-exe-my-attention-primary:before {
  content: "\e915";
}

.icon-wodeguanzhu:before {
  content: "\e60c";
}

.icon-dianzan_kuai:before {
  content: "\ec8c";
}

.icon-pinglun:before {
  content: "\e891";
}

.icon-dianzan:before {
  content: "\ec7f";
}

</style>
